<template>
  <div class="home">
    <mheaderVue :isblack="true" :showback="false" :title="'网易云音乐'"></mheaderVue>
    <mSearchVue @click="toSearch"></mSearchVue>
    <keep-alive>
      <div class="rankContent">
        <mRankBannerVue :banners="state.banners"></mRankBannerVue>
        <mRankListVue :rankList="state.rankList"></mRankListVue>
      </div>
    </keep-alive>
  </div>
</template>
<script setup>
import mheaderVue from "../components/m-header.vue";
import mSearchVue from "../components/m-search.vue";
import mRankBannerVue from "../components/m-rank-banner.vue";
import { useRouter } from "vue-router";
import mRankListVue from "../components/m-rank-list.vue";
import { reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { getBannerList, getToplist } from "../request/api";

// 数据
const router = useRouter()
const state = reactive({
  banners: [],
  rankList: []
})

// 跳转至搜索页面
const toSearch = () => {
  router.push({ path: '/search' })
}
// 获取轮播图
onMounted(async () => {
  let { banners } = await getBannerList()
  state.banners = banners
})
// 获取歌单列表
onMounted(async () => {
  let { list } = await getToplist()
  state.rankList = list.slice(0, 4)
  // console.log(state.rankList);
})


</script>
<style lang="stylus">
.home
  width 100vw
  height 100vh
  overflow-y scroll
  // background blue
  .rankContent
    box-sizing border-box
    margin  0 14px
    margin-top 10px
    border-radius 10px
    overflow-x hidden
    overflow-y scroll
</style>